<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import { isDark, toggleDark } from '~/logic'
import { i18nStore } from '~/modules/i18n'

const { t, availableLocales, locale } = useI18n()

const toggleLocales = () => {
  // change to some real logic
  const locales = availableLocales
  const value = locales[(locales.indexOf(locale.value) + 1) % locales.length]
  locale.value = value
  i18nStore.value = value
}
</script>

<template>
  <nav class="text-xl fixed pt-2 pl-4 pr-4 z-400 bg-white dark:bg-black top-0 right-0 shadow text-black dark:text-white">
    <a class="icon-btn mx-2" :title="t('button.toggle_dark')" @click="toggleDark">
      <carbon-moon v-if="isDark" />
      <carbon-sun v-else />
    </a>

    <a class="icon-btn mx-2" :title="t('button.toggle_langs')" @click="toggleLocales">
      <carbon-language />
    </a>
  </nav>
</template>
